<template>
	<view class="">
		<search placeholder="请输入车牌号" @input="inputChange"></search>
		<mescroll-uni style="padding: 0 20rpx 130rpx;" ref="mescrollRef" @init="mescrollInit" @down="downCallback" :top="'100rpx'" @up="upCallback">
		  <uni-list>
			  <view class="item" v-for="(item,index) in listdata" :key="index" @click="itemClick(item)">
				 
				 <text class="title">
				 	车牌号:{{item.carPlate}}
				 </text>
				 <u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>
				 
			  	<title-content title="车架号:" :content="item.vin"></title-content>
			  	<title-content title="品牌/车系/车型:" :content="item.carBrandSeriesModelName"></title-content>
				<u-line color="#efefef" :customStyle="{'margin': '16rpx 0','display': 'block',}"></u-line>
			  	<title-content title="任务:" :content="item.transferTypeStr"></title-content>
				<title-content title="移库原因:" :content="item.transferReason"></title-content>
				<title-content title="仓库名称:" :content="item.warehouseName"></title-content>
			  </view>
		  </uni-list>
		</mescroll-uni>
		
		<view class="button-container">
			<button class="btn-item" @click="addAllocation">车辆调拨</button>
		</view>
		
	</view>
</template>

<script>
	import titleContent from 'components/global/title-content.vue'
	import search from '../../../components/search.vue';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			titleContent,
			search
		},
		
	    data() {
			return {
				page: 1,
				listdata: [],
				searchWord: ""
			}
		},
		onLoad() {
      uni.$on('trans', res=>{
        this.page = 1;
        this.getData();
      })
    },
		methods: {
			itemClick(item){
				uni.navigateTo({
					url:'/pages/car/allocation/car-allocationDetail?inOutRecordsId='+item.inOutRecordsId
				})
			},
			
			//获取数据
			getData() {
				this.$u.api.getTransfersList({
						carPlate: this.searchWord,
						pageNo: this.page,
					}).then(
						res => {
							if (this.page == 1) {

                this.listdata = [];
              }
              this.listdata = this.listdata.concat(res);
              this.mescroll.endSuccess(res.length);
            }
					)
					.catch(() => {
						this.mescroll.endErr();
					})
			},
			
			//上拉加载回调
			upCallback(page) {
				console.log("触发了上拉加载" + page);
			
				this.page = page.num;
				this.getData();
			},
			//搜索监听事件
			inputChange(value) {
				this.searchWord = value;
				this.getData();
			},
			//新增调拨
			addAllocation() {
				uni.navigateTo({
					url: 'car-addAllocation'
				})
			}


             
		}
	}
	
</script>

<style lang="scss">
	.title-container {
		display: flex;
		align-items: center;
	}
	.title {
		width: 85%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: $black33;
		margin-left: 20rpx;
	}
	
	.bottom {
		position: fixed;
		width: 100%;
		height: 120rpx;
		bottom: 0;
		z-index: 999;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		color: $xz-textColor-FF;
	
	}
	.bottom-add {
		width: 90%;
		line-height: 88rpx;
		border-radius: 44rpx;
		background-color: $xz-bgColor-blue;
		color: $xz-textColor-FF;
		font-size: 30rpx;
		margin: 11rpx;
		
	}
	
</style>

